<template>
	<view class="wrap">
		<view class="input-group">
			<view class="flex info-wap" @click="toInfoEdit()">
				<view class="flex-1">
					<view class="fc-32 fs-36">公司信息</view>
					<view class="fs-26 fc-66">公司介绍~</view>
				</view>
				<view class="info-img flex">
					<view class="head-img">
						<image v-if="company.enterpriseLogo ==''" :src="imgSrcUrl + 'head.png'"></image>
						<image v-else :src="company.enterpriseLogo"></image>
					</view>
					<image class="backicon" src="https://web.suqzp.com/public/jiantou.png"></image>
				</view>
			</view>
			<view class="input-column border-bottom-1px">
				<text class="title">休息时间</text>
				<view class="skill-item">
					<text v-for="(item, index) in restTimes" :key="index" @click="selectRest(index)" class="item" :class="item.default == true ? 'text-blue' : 'text-normal'">
						{{ item.dictValue }}
					</text>
				</view>
			</view>
			<view class="input-column border-bottom-1px">
				<text class="title">加班情况</text>
				<view class="skill-item">
					<text v-for="(item, index) in overTimes" :key="index" @click="selectOverTime(index)" class="item" :class="item.default == true ? 'text-blue' : 'text-normal'">
						{{ item.dictValue }}
					</text>
				</view>
			</view>
			<view class="input-column border-bottom-1px"><text class="super-title">福利待遇</text></view>
			<view class="skill-item bg-ff">
				<text v-for="(item, index) in welfareList" :key="index" @click="select(index)" class="item" :class="item.default == true ? 'text-blue' : 'text-normal'">
					{{ item.dictValue }}
				</text>
			</view>
			<view class="input-column border-bottom-1px margin-top-20" @click="selectAddress">
				<text class="title">公司地址</text>
				<view class="input-item">
					<input class="padding-10" placeholder="请选择工作地点" disabled="true" v-model="company.enterpriseAddress" style="width: 100%;"/>
					<text class="yzb yzb-next"></text>
				</view>
				<text class="padding-width-10 text-color-grey text-size-base">{{ company.address }}</text>
			</view>
			<view class="input-column border-bottom-1px" @click="toWorkContent(company.desc)">
				<text class="super-title">公司介绍</text>
				<view class="space-between-algin row padding-height-20">
					<input class="padding-10" disabled="true" placeholder="选填 请输入" v-model="company.enterpriseDetail"  style="width: 100%;"/>
					<text class="yzb yzb-next"></text>
				</view>
			</view>
			<view class="info-wap">
				<view class="flex-1">
					<view class="fc-32 fs-36 flex-1">公司风采</view>				
				</view>
				<view class="">
					<view class="fc-99 fs-24">支持图片类、doc、docx、pdf格式的文件，每个文件大小不超过10M，最多可上传5个文件</view>
					<view class="module-image">
						<view class="image_view" v-for="(item, index) in ablumList" :key="index" v-if="ablumList.length > 0">
							<image :src="item" class="release_img" @click="previewImg(index)"></image>
							<view class="img_delete center-algin" @click="deleteImg(index)"><text class="text-white text-size-base text-color-inverse">X</text></view>
						</view>
						<view class="release_img center-algin release_img_dottedLine" @click="companyUpload()" v-if="ablumList.length < 5"><text class="text-grey">+</text></view>
					</view>
				</view>
				<!--  -->
				
			</view>			
			<view class="info-wap">
				<view class="flex-1">
					<view class="fc-32 fs-36 flex-1">个人视频</view>				
				</view>
				<view class="gr-main">				
					<view class="video-pic mar-top-20 flex"  @click="companyUpload()">
						<view class="addpic" v-if="company.enterpriseVideo==''">+</view>
						<video  id="myVideo" v-else :src="company.enterpriseVideo"></video>
						
					</view>
				</view>
			</view>
		</view>
		<view class="btn-row row flex jcsb">
			<button v-if="id" type="warn" class="btn-delete" @tap="remove">删除</button>
			<button type="primary" class="btn-save" :class="id ? 'width-55' : 'width-90'" @click="register">提交</button>
		</view>
		
		<!-- 提交信息 -->
		<uni-popup id="dialogInput" ref="dialogInput" type="dialog">
			<uni-popup-dialog mode="input" :title="dialogTitle" :value="value" placeholder="请输入内容(3-8字)" @confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {		
		return {
			imgSrcUrl: this.$mConfig.imgSrcUrl,
			skills:[],			
			company:{
				enterpriseLogo:'',
				restTime:'',//休息时间
				overtime:'',//加班情况
				enterpriseAddress:'',//企业地址
				enterprisePicture:'',//企业图片
				enterpriseVideo:'',//企业视频
				enterpriseIndustry:'',
			},
			restTimes:'',//休息时间
			overTimes:'',//加班情况
			welfareList:'',//福利待遇
			welfare:'',//福利待遇
			ablumList: [],//公司图片
		};
	},
	onLoad(query) {},
	mounted() {
		let that = this			
		this.getRrecruitList()		
	},
	methods: {
		//获取企业信息
		async getRrecruitList(){
			let param = {
				pageNum: 1,
				pageSize: 10,
				imgType:1,
				wxuserId:uni.getStorageSync('wxuser_id'),
			}
			let data = await this.$apis.getRrecruitList(param);
			if(data.rows.length>0){
				this.company = data.rows[0]
				this.ablumList = this.company.enterprisePicture.split(',');
				this.getRecruitOvertime()
				this.getRecruitResttime()
				this.getRecruitWelfare()
			}			
		},
		//休息时间
		async getRecruitResttime() {
			let res = await this.$apis.getRecruitResttime();
			if (res) {				
				this.restTimes = res.data
				for(let i=0;i<this.restTimes.length;i++){				
					if(this.company.resttime==this.restTimes[i].dictValue){
						this.restTimes[i].default = true;
					}else{
						this.restTimes[i].default = false;
					}
				}
			}
		},
		//加班情况		
		async getRecruitOvertime(){
			let data = await this.$apis.getRecruitOvertime();
			if(data.code == 200){
				this.overTimes = data.data
				for(let i=0;i<this.overTimes.length;i++){
					if(this.company.overtime==this.overTimes[i].dictValue){
						this.overTimes[i].default = true;
					}else{
						this.overTimes[i].default = false;
					}
				}
			}			
		},
		//福利待遇
		async getRecruitWelfare(){
			let data = await this.$apis.getRecruitWelfare();
			if(data.code == 200){
				this.welfareList = data.data
				let selectWelfare=this.company.welfare.split(",");
				for (let i = 0; i < this.welfareList.length; i++) {
					for(let j=0;j<selectWelfare.length;j++){
						if (this.welfareList[i].dictValue == selectWelfare[j]) {
							this.welfareList[i].default=true;
						}
					}
				}
			}		
		},
		// 选择图片
		companyUpload() {		
			let that = this;
			this.cover = '';
			uni.chooseMedia({
				count: 5 - that.ablumList.length,
				mediaType: ['image'],
				sourceType: ['album', 'camera'],
				maxDuration: 30,
				camera: 'back',
				success(res) {
					let tmpFiles = res.tempFiles;
					if (res.type == 'video') {	
						that.company.enterpriseVideo = tmpFiles[0].tempFilePath
					} else {
						let data = that.ablumList
						if (data.length < 5) {
							for (var i = 0; i < tmpFiles.length; i++) {
								data.push(tmpFiles[i].tempFilePath);
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: '最多只能有5张图片'
							});
							return;
						}
						that.ablumList = data;
						that.company.enterprisePicture = that.ablumList.toString()
					}				
				}
			});
		},
		//公司信息页面
		toInfoEdit(){
			this.$mRouter.push({
				route: this.$mRoutesConfig.enter,
				query: {
					
				}
			});
		},
		//选择图片
		uploadImgs(type) {
			var that = this
			uni.chooseImage({
				success(res) {
					let tempFilePaths = res.tempFilePaths;
					that.tmpImageUrl = tempFilePaths[0];					
				}
			});
		},
		// 查看图片
		previewImg(index) {
			uni.previewImage({
				indicator: 'number',
				loop: true,
				current: this.ablumList[index],
				urls: this.ablumList
			});
		},
		
		// 删除图片
		deleteImg(index) {
			if (this.mediaType == 0) {
				this.ablumList.splice(index, 1);
				// this.imgList.splice(index, 1);
			} else {
				this.imgList = [];
				this.mediaType = 0;
				this.$forceUpdate();
			}
		},
		/** 选择休息时间 */
		selectRest(index){
			if(this.restTimes[index].default==false){//选中
				//把其他的全部关闭
				for(let i=0;i<this.restTimes.length;i++){
					if(i==index){
						this.restTimes[index].default = true;
						this.company.restTime=this.restTimes[index].dictValue;
					}else{
						this.restTimes[i].default = false;
					}
				}
			}else{
				this.restTimes[index].default = false;
				this.company.restTime="";
			}
			console.log(this.company.restTime)
		},
		/**选择加班情况 */
		selectOverTime(index){
			if(this.overTimes[index].default==false){//选中
				//把其他的全部关闭
				for(let i=0;i<this.overTimes.length;i++){
					if(i==index){
						this.overTimes[index].default = true;
						this.company.overtime=this.overTimes[index].dictValue;
					}else{
						this.overTimes[i].default = false;
					}
				}
			}else{
				this.overTimes[index].default = false;
				this.company.overtime="";
			}
			console.log(this.company.overtime)
		},
		//选择待遇
		select(index) {
			this.welfareList[index].default = !this.welfareList[index].default;
			//获取已选择的
			// this.selected=[];
			this.welfareName = '';
			this.welfareId = '';
			for (let i = 0; i < this.welfareList.length; i++) {
				if (this.welfareList[i].default == true) {
					// this.selected.push(this.welfareList[i]);
					this.welfareName = this.welfareName + ',' + this.welfareList[i].dictValue;
					this.welfareId = this.welfareId + ',' + this.welfareList[i].dictCode;
				}
			}
			this.welfareName = this.welfareName.substr(1, this.welfareName.length);
			this.welfareId = this.welfareId.substr(1, this.welfareId.length);		
			this.company.welfare = this.welfareName;			
		},		
		//公司地址
		selectAddress() {
			uni.chooseLocation({
				success: res => {					
					if (res.address == '') {
						this.address = '请选择详细地址';
						return;
					}
					this.company.addressName = res.name;
					this.company.enterpriseAddress = res.address;
					console.log(this.company.enterpriseAddress);
					this.company.latitude = res.latitude;
					this.company.longitude = res.longitude;
				}
			});
		},
		//公司介绍
		toWorkContent(content) {
			this.$mRouter.push({
				route: this.$mRoutesConfig.editProContent,
				query: {
					type: 4,
					content: this.company.enterpriseDetail
				}
			});
		},
		
		//提交信息
		register(){				
			//新增
			if(this.company.restTime == ''){
				uni.showToast({
					title: '请选择休息时间',
					icon: "none"
				});
				return false;
			}else if(this.company.overtime == ''){
				uni.showToast({
					title: '请选择加班情况',
					icon: "none"
				});
				return false;
			}else if(this.company.welfare == ''){
				uni.showToast({
					title: '请选择福利待遇',
					icon: "none"
				});
				return false;
			}else if(this.company.enterpriseAddress == ''){
				uni.showToast({
					title: '请选择公司地址',
					icon: "none"
				});
				return false;
			}
			delete this.company.industryList;
			let res = this.$apis.addCompanyInfo(this.company)
			if(res){
				uni.showToast({title: '提交成功'})
				setTimeout(function(){
					uni.navigateBack({
						delta: 1
					})
				},1200)				
			}else{
				uni.showToast({title: res.msg})
			}
			
		},
	}
};
</script>

<style lang="scss">
page{
	background: #f6f6f6;
	.lin-h-64{
		line-height: 64rpx;
	}
	.info-wap{
		background: #fff;
		padding:26rpx 22rpx;
		margin-top: 20rpx;
		.info-img{
			image{
				width: 104rpx;
				height: 104rpx;
				display: inline-block;
				border-radius: 50%;
			}
			.backicon{
				width: 16rpx;
				height: 30rpx;
				display: inline-block;
				position: relative;
				top: 36rpx;
				margin-left: 24rpx;
			}				
		}
		
		.info-1{
			width: 642rpx;
			height: 128rpx;
			overflow: hidden;
			margin: 12px 0;
			image{
				width: 642rpx;
				height: 128rpx;
				display: block;
			}
		}
		.addicon{
			width: 36rpx;
			height:36rpx;
			position: relative;
			top: 4rpx;
		}
		.gr-main{
			.upload-pic{
				.addpic{
					width:204rpx;
					height:192rpx;
					background: #F6F6F6;
					border-radius: 8px;
					opacity: 1;
					margin: 0 10rpx 0 0;
				}
			}
			.video-pic{
				width: 100%;
				height:294rpx;
				background: #F8F8F8;
				border-radius:8rpx;
				opacity: 1;
				.addpic{
					text-align: center;
					line-height: 294rpx;
					flex: auto;
					font-size: 72rpx;
					color: #999;
				}
			}
			padding-bottom: 200rpx;
		}
		.text-sub-title{
			flex: 1;
			font-size: 30rpx;
			font-weight: bold;
		}
	}
}

.input-column {
	display: flex;
	flex-direction: column;
	background-color: #fff;
	padding: 30upx 20upx 10upx 20upx;

	.title {
		margin-left: 10upx;
		font-size: 28rpx;
	}

	.input-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.picker {
		padding: 30upx 0;
		margin-left: 10upx;
		position: relative;
		picker {
			font-size: 28rpx;
			width: 100%;
			position: absolute;
		}
	}
	.yzb-next {
		float: right;
		color: #999;
	}
}

.content {
	background: #fff;
}

.btn-row {
	position: fixed;
	z-index: 99;
	bottom: 0upx;
	padding: 20upx 0;
	background-color: #ffffff;
	width: 100%;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	box-sizing: content-box;	
	.btn-delete {
		background-color: #ccc;
		height: 90upx;
		line-height: 90upx;
		font-size:34rpx;
		color:#333;
		width: 50%;
	}

	.btn-save {
		background-color: #84C0F4;
		height: 90upx;
		line-height: 90upx;
		font-size:34rpx;
	}
	.width-55 {
		width: 50%;
	}

	.width-90 {
		width: 90%;
	}
}


.text-blue {
	border: 1upx solid #84C0F4;
	background-color: #84C0F4;
	color: #ffffff;
}
.text-normal {
	color: $font-color-666;
	border: 1upx solid $border-color-base;
}

.skill-item {
	padding: 20upx;
	flex-wrap: wrap;
	display: flex;
	.skill-item-item{
		position: relative;
		margin-right: 20upx;
	}
	.item {
		font-size: $uni-font-size-sm;
		padding: 12upx 20upx;
		margin-right: 20upx;
		margin-bottom: 20upx;
		// background-color: $border-color-base;
		border-radius: 8upx;
		// color: $font-color-666;
	}
}

.module-image {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding: 20upx 0;
	view {
		display: flex;
		margin:0 10rpx 10rpx 0;
	}
	.image_view{
		position: relative;
	}
}

.release_img {
	width: 192rpx;
	height: 192rpx;
	border: 1px dashed #F8F8F8;
	margin-bottom: 10upx;
}
.release_img_dottedLine {
	border: 1px dashed #F8F8F8;
	background: #F8F8F8;
}
.img_delete {
	width: 45upx;
	height: 45upx;
	border-radius: 50%;
	background: rgba(234, 178, 178, 0.5);
	position: absolute;
	right: -15upx;
	top: -15upx;
	z-index: 10;
}
</style>
